import React, { FC, useEffect } from "react"
import { Button, Checkbox, Form, Input, Space } from "antd"
import { OptionType, QuestionCheckboxPropsType } from "./interface"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
import { nanoid } from "nanoid"

const PropComponent: FC<QuestionCheckboxPropsType> = (props: QuestionCheckboxPropsType) => {
    const { title, isVertical, list = [], onChange, disabled } = props
    const [form] = Form.useForm()

    useEffect(() => {
        form.setFieldsValue({ title, isVertical, list })
    }, [title, isVertical, list])

    function handleValuesChange() {
        if (onChange == null) return

        const newValues = form.getFieldsValue() as QuestionCheckboxPropsType
        console.log(newValues)

        // 目前我没有出现这个bug，没有测试出bug，但最好还是加上吧
        // 清除option 会导致数据中的text变为undefined，而选项本身还在，需要清除undefined的数据项
        if (newValues.list) {
            // 需要清除 text undefined 的 选项
            // filter true保留，false不保留
            // pt.text == null 就是空，为true，取反 为false，过滤掉
            newValues.list = newValues.list.filter(opt => !(opt.text == null))
        }

        // 新添加的项value为空，需要设置唯一值
        const { list = [] } = newValues
        list.forEach(opt => {
            if (opt.value) return
            opt.value = nanoid(5)
        })

        // 调用父组件传递过来的 onChange
        onChange(newValues)
    }

    return (
        <Form layout="vertical" form={form} initialValues={{ title, isVertical, list }} disabled={disabled} onValuesChange={handleValuesChange}>
            <Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入标题" }]}>
                <Input />
            </Form.Item>

            {/* 动态添加、删减 表单项 */}
            <Form.Item label="选项">
                <Form.List name="list">
                    {(fields, { add, remove }) => (
                        <>
                            {/* fields 就是 list */}
                            {/* 遍历把已有的选项罗列出来，可以删除 */}
                            {fields.map((item, index) => {
                                const { key, name } = item

                                return (
                                    <Space key={key} align="baseline">
                                        {/* 当前选项是否选中 */}
                                        {/* checkbox没有value属性，所以要使用checked属性代替value */}
                                        <Form.Item name={[name, "checked"]} valuePropName="checked">
                                            <Checkbox />
                                        </Form.Item>

                                        {/* name={[name, "text"]} 表示的哪个选项的文本（这里是列表），相对于键值对*/}
                                        {/* name就是0、1、2 name={[name, "text"]} 表示路径是 list[1].text */}
                                        <Form.Item
                                            name={[name, "text"]}
                                            rules={[
                                                { required: true, message: "请输入选项文字" },
                                                {
                                                    validator: (_, text) => {
                                                        const { list = [] } = form.getFieldsValue()
                                                        let num = 0
                                                        list.forEach((opt: OptionType) => {
                                                            if (opt.text === text) {
                                                                // 记录text 相同的个数，预期为1，就是自己本身
                                                                num++
                                                            }
                                                        })
                                                        if (num === 1) return Promise.resolve()
                                                        return Promise.reject(new Error("和其他选项重复了"))
                                                    }
                                                }
                                            ]}
                                        >
                                            <Input placeholder="请输入选项文字" />
                                        </Form.Item>

                                        {/* 当前选项删除按钮 */}
                                        {/* name相对于list[0]、list[1] */}
                                        {index > 0 && <MinusCircleOutlined onClick={() => remove(name)} />}
                                    </Space>
                                )
                            })}

                            {/* 添加选项 */}
                            <Form.Item>
                                {/* add就是给list数组添加选项 */}
                                <Button type="link" block onClick={() => add({ text: "", value: "", checked: false })} icon={<PlusOutlined />}>
                                    添加选项
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
            </Form.Item>

            <Form.Item name="isVertical" valuePropName="checked">
                <Checkbox>竖向排列</Checkbox>
            </Form.Item>
        </Form>
    )
}

export default PropComponent
